html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.row {
  display: flex;
  flex-direction: row;
  /* padding: 0 20px; */
  /* margin-bottom: 40px; */
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
  position: relative;
}

.flex-3 {
  flex: 3;
  position: relative;
}

.media_clone_common {
  margin-bottom: 15px !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.demo-form-inline {
  padding-left: 3%;
}

.dv-border-box-11 {
  padding: 50px 10px;
  box-sizing: border-box;
}

.dv-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.dv-decoration-3 {
  position: absolute;
  top: 50%;
  left: 100px;
}

.dv-decoration-5 {
  margin-left: 50%;
  transform: translate(-50%);
}

.title_font {
  color: #fff;
  /* width: 100%; */
  font-size: 1.5rem;
  /* text-shadow: 0 0 1em #3f96a5, 0 0 0.5em blue; */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1%;
  transition: all 1.5s ease;
}

.title_font:hover {
  color: #fff;
  cursor: pointer;
  animation: Glow 1.5s ease infinite alternate;
}

@keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00a67c,
      0 0 70px #00a67c, 0 0 80px #00a67c, 0 0 100px #00a67c, 0 0 150px #00a67c;
  }

  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c,
      0 0 35px #00a67c, 0 0 40px #00a67c, 0 0 50px #00a67c, 0 0 75px #00a67c;
  }
}

.el-dialog {
  border: 1px solid #3f96a5 !important;
  /* box-shadow: 1px 6px #3f96a5 inset; */
  animation-name: shineBlue;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  background-color: #070f20 !important;
}

.el-dialog__title {
  color: #cfcfcf !important;
}

.el-button {
  background-color: transparent !important;
  color: #cfcfcf !important;
  border: 1px solid #3f96a5 !important;
  /* box-shadow: 1px 6px #3f96a5 inset; */
  animation-name: shineBlue;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes shineBlue {
  from {
    -webkit-box-shadow: 0 0 9px #333;
  }

  50% {
    -webkit-box-shadow: 0 0 18px #3f96a5;
  }

  to {
    -webkit-box-shadow: 0 0 9px #333;
  }
}

.one-eight {
  position: absolute;
  top: 0;
}

.two-eight {
  position: absolute;
  right: 0;
  top: 0;
}

.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #3f96a5 !important;
  animation-name: shineBlue;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  color: #cfcfcf !important;
}

/* #container {
    border: 1px solid #3f96a5 !important;
    animation-name: shineBlue;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  } */
.today_default_font {
  position: absolute;
  right: 3%;
  top: 80px;
  /* text-shadow: 0 0 0.5em #444, 0 0 1em #3f96a5; */
  color: #cfcfcf;
  transition: all 1.5s ease;
}

.today_default_font:hover {
  color: #cfcfcf;
  cursor: pointer;
  animation: Glow 1.5s ease infinite alternate;
}

.dv-decoration-10 {
  position: absolute;
  right: 0px;
  top: 25px;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #070814 !important;
  color: #efefef !important;
}

.el-table--border,
.el-table--group {
  animation-name: shineBlue;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.click_btn_flex {
  position: absolute;
  top: 50%;
  left: 2%;
  z-index: 999;
  background-color: transparent !important;
  border: 1px solid #3f96a5 !important;
  /* box-shadow: 1px 6px #3f96a5 inset; */
  animation-name: shineBlue2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  outline: 0;
  transition: transform ease-in 0.1s, background-color ease-in 0.1s,
    box-shadow ease-in 0.25s;
}

.click_btn_flex::before {
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  transition: ease-in-out 0.5s;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    /*  */
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%),
    radial-gradient(circle, #3f96a5 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
    20% 20%;
  background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
    65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
    64% 70%, 80% 71%;
  animation: bubbles ease-in-out 0.75s forwards;
}

.click_btn_flex:active {
  transform: scale(0.95);
  background-color: #3f96a5;
  box-shadow: 0 2px 25px rgba(35, 110, 223, 0.5);
}

.click_btn_flex:active::before {
  animation: none;
  background-size: 0;
}

@keyframes bubbles {
  0% {
    background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
      65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
      64% 70%, 80% 71%;
  }

  50% {
    background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
      75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
      68% 96%, 95% 100%;
  }

  100% {
    background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
      100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
      100% 100%;
    background-size: 0% 0%;
  }
}

@keyframes shineBlue2 {
  from {
    -webkit-box-shadow: 0 0 18px #333;
    opacity: 0.7;
  }

  50% {
    -webkit-box-shadow: 0 0 36px #3f96a5;
    opacity: 1;
  }

  to {
    -webkit-box-shadow: 0 0 18px #333;
    opacity: 0.8;
  }
}

.click_btn_flex:hover {
  cursor: pointer;
  animation: Glow2 1.5s ease infinite alternate;
}

@keyframes Glow2 {
  from {
    text-shadow: 0 0 0px #4DFFFF, 0 0 0px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF,
      0 0 2px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF;
    box-shadow: 0 0 0px #4DFFFF, 0 0 0px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF,
      0 0 2px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF, 0 0 2px #4DFFFF;
  }

  to {
    text-shadow: 0 0 0px #4DFFFF, 0 0 0px #4DFFFF, 0 0 5px #4DFFFF, 0 0 5px #4DFFFF,
      0 0 5px #4DFFFF, 0 0 10px #4DFFFF, 0 0 10px #4DFFFF, 0 0 15px #4DFFFF;
    box-shadow: 0 0 0px #4DFFFF, 0 0 0px #4DFFFF, 0 0 5px #4DFFFF, 0 0 5px #4DFFFF,
      0 0 5px #4DFFFF, 0 0 10px #4DFFFF, 0 0 10px #4DFFFF, 0 0 15px #4DFFFF;
  }
}

/* 修改table滚动条 */

.el-table__body-wrapper::-webkit-scrollbar {
  width: 17px;
  height: 10px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #070814;
  /* background: linear-gradient(to bottom, #3f96a5 0%,#071d46 100%); */
  border-radius: 30px;
  animation-name: shineBlue2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.el-table tr:hover {
  color: #000 !important;
}

.dv-border-box-10,
.dv-border-box-3 {
  padding: 10px;
}

.font-1 {
  color: #fff;
  margin: 10px 0;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

.tree-dialog {
  height: 40rem;
}

.dv-decoration-2 {
  position: absolute;
  top: 50%;
}

@media screen and (max-height: 1080px) {
  .common-flex {
    height: 480px !important;
  }
}

@media screen and (max-height: 900px) {
  .common-flex {
    height: 360px !important;
  }
}

.title-font-row {
  width: 100%;
  padding: 20px;
  background: rgba(6, 30, 93, 0.5);
  position: relative;
  margin-bottom: 20px;
}

.title-font-row div {
  display: flex;
  color: #fff;
  justify-content: center;
  align-items: center;
}

.title-font-row .dv-decoration-10 {
  position: absolute;
  top: 115px;
  left: 2%;
}

.border-top-common {
  border-top: 2px solid #00c2ff;
  background-color: rgba(6, 30, 93, 0.5);
  margin: 0 10px 0 10px;
  box-sizing: border-box;
}

/* 预警灯样式动效 */
/* @keyframes scaless {
    0% {
      transform: scale(1);
    }
  
    50%,
    75% {
      transform: scale(2);
    }
  
    78%,
    100% {
      opacity: 0;
    }
  } */
/* 预警等级正常状态 */
/* .item {
    width: 15px;
    height: 15px;
    background-color: #55cea1;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .item:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    opacity: 0.7;
    background-color: #55cea1;
    animation: scaless 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  } */
/* 预警灯样式离线的时候 */
.danger_status {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  cursor: pointer;
}

.danger_status:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0.7;
  background-color: red;
  animation: scaless 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}

/* 呼吸灯黄灯的时候 */
.yellow_status {
  width: 15px;
  height: 15px;
  background-color: rgb(252, 206, 5);
  border-radius: 50%;
  cursor: pointer;
}

.yellow_status:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0.7;
  background-color: rgb(252, 206, 5);
  animation: scaless 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}

#item {
  position: absolute;
  top: 10px;
  left: -15px;
}

/* 旋转动效 */
@keyframes fadenum {
  100% {
    transform: rotate(360deg);
  }

}
/* 应用于嵌套元素的规则 */
.nested-enter-active {
  animation: rubberBand 1.5s;
}
.nested-leave-active {
  animation: fadeOutDown 1.5s reverse;
}
.bounce-enter-active {
  animation: fadeInUp 1.5s;
}
.bounce-leave-active {
  animation: fadeOutDown 1.5s reverse;
}

@-webkit-keyframes fadeInUp {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none
}
}@keyframes fadeInUp {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none
}
}
@-webkit-keyframes fadeOutDown {
	0% {
	opacity: 1
}
to {
	opacity: 0;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}
}
@keyframes fadeOutDown {
	0% {
	opacity: 1
}
to {
	opacity: 0;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0)
}
}
@-webkit-keyframes rubberBand {
	0% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}
30% {
	-webkit-transform: scale3d(1.25,.75,1);
	transform: scale3d(1.25,.75,1)
}
40% {
	-webkit-transform: scale3d(.75,1.25,1);
	transform: scale3d(.75,1.25,1)
}
50% {
	-webkit-transform: scale3d(1.15,.85,1);
	transform: scale3d(1.15,.85,1)
}
65% {
	-webkit-transform: scale3d(.95,1.05,1);
	transform: scale3d(.95,1.05,1)
}
75% {
	-webkit-transform: scale3d(1.05,.95,1);
	transform: scale3d(1.05,.95,1)
}
to {
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}
}
@keyframes rubberBand {
	0% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}
30% {
	-webkit-transform: scale3d(1.25,.75,1);
	transform: scale3d(1.25,.75,1)
}
40% {
	-webkit-transform: scale3d(.75,1.25,1);
	transform: scale3d(.75,1.25,1)
}
50% {
	-webkit-transform: scale3d(1.15,.85,1);
	transform: scale3d(1.15,.85,1)
}
65% {
	-webkit-transform: scale3d(.95,1.05,1);
	transform: scale3d(.95,1.05,1)
}
75% {
	-webkit-transform: scale3d(1.05,.95,1);
	transform: scale3d(1.05,.95,1)
}
to {
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}
}
